<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<div id="commentList">
	<jsp:include page="commentListterm.jsp"/>
</div>
<div id="commentListterm0">
	<div id="commenteditformdiv">
		<hr style='margin: 0px 0;border-top: 1px solid rgba(0,0,0,0.1);'>
		<div style="padding: 10px;">
			<h4><a id="commenteditformtitle">发表评论</a></h4>
			<form id="commenteditform" action="comment/categoryAddPage">
			    <input id="commentparentid" name="parentid" style="display: none;" >
			    <input id="commentrootid" name="rootid" style="display: none;" >
			    <input name="articleid" value="${article.id}" style="display: none;" >
				<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width:100%;">
				    <textarea name="content" class="mdl-textfield__input" rows= "3" maxlength="500" required="required"  ></textarea>
				    <label class="mdl-textfield__label" for="sample5">内容</label>
				</div>
			  	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				    <input name="name" class="mdl-textfield__input" type="text" maxlength="20" required="required" >
				    <label class="mdl-textfield__label" for="sample3">姓名</label>
			  	</div>
			  	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				    <input name="email" class="mdl-textfield__input" type="email" maxlength="200" required="required" >
				    <label class="mdl-textfield__label" for="sample3">Email</label>
			  	</div>
			  	<div>
				  	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
					    <input id="validateCodeInput" name="validateCode" class="mdl-textfield__input" type="email" maxlength="200" required="required" >
					    <label class="mdl-textfield__label" for="sample3">验证码</label>
				  	</div>
				  	<img id="validateCodeImg" onclick="changeValidateCode($(this))" alt="" src="getValidateCode">
			  	</div>
			  	<br>
			  	<a onclick="commenteditformSubmit()" class="mdl-button mdl-button--accent mdl-js-button mdl-button--raised mdl-js-ripple-effect">
				  发表评论
				</a>
				&nbsp&nbsp&nbsp&nbsp
				<button id="commenteditformreset" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="reset">重置</button>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		function changeValidateCode(elem){
			elem.attr("src","getValidateCode?timestamp="+new Date().getTime());
		}
		function commenteditformSubmit(){
		    var flag = false;
		    var nullinput = null;
			$("#commenteditform").find(".mdl-textfield__input").each(function(){
				if($(this).val()==""){
				    flag = true;
				    if(nullinput==null) nullinput = $(this);
				}
			});
			if(flag){
				alert("必填项不能为空！");
				nullinput.focus();
				return false;
			}
			$("#commenteditform").ajaxSubmit({
			      type: "post",  //提交方式  
			      dataType: "json", //数据类型  
			      success: function (data) { //提交成功的回调函数  
			             if(data!=null){
			            	 var result =  eval(data);
			            	 var json = result.comment;
			            	 if(result.code==0){
				            	 var newcomment = [
		            	                           "<div id=\"commentListterm"+json.id+"\" class=\"commentListterm mdl-shadow--2dp\">",
		            	                           "	<div style=\"padding: 10px;background: #eee;\">",
		            	                           "		<a>"+json.name+"</a>",
		            	                           "		<div style=\"position: relative;float: right;\">",
		            	                           "			<span>"+new Date(json.createtime).format('yyyy年MM月dd日')+"</span>~",
		            	                           "			<a onclick=\"replycommen("+json.id+",\'回复："+json.name+"\',"+json.rootid+")\" style=\"cursor:pointer;\">回复</a>",
		            	                           "		</div> ",
		            	                           "	</div>",
		            	                           "	<hr style=\"margin: 0px 0;border-top: 1px solid rgba(0,0,0,0.1);\">",
		            	                           "	<div style=\"padding:20px 10px;\">",
		            	                           		json.content,
		            	                           "	</div>",
		            	                           "	<hr style=\"margin: 0px 0;border-top: 1px solid rgba(0,0,0,0.1);\">",
		            	                           "	<div style=\"padding: 10px;background: #eee;\">",
		            	                           "		<i style=\"float: left;font-size: 20px;padding-right: 5px;\" class=\"material-icons\"></i>",
		            	                           "		<a>"+json.os+"</a>",
		            	                           "		<div style=\"position: relative;float: right;\">",
		            	                           "			<i style=\"float: left;font-size: 20px;padding-right: 5px;\" class=\"material-icons\"></i>",
		            	                           "			<a>"+json.browser+"</a>",
		            	                           "		</div> ",
		            	                           "	</div>",
		            	                           "</div>"].join("");
				            	 if(json.parentid==0){
				            		 $("#commentList").append(newcomment);
				            	 }else{
					            	 if($("#childrencommentList"+json.parentid).length<=0){
					            		 $("#commentListterm"+json.parentid).append([
					            		                                            "<hr style=\'margin: 0px 0;border-top: 1px solid rgba(0,0,0,0.1);\'>",
					            		                   	                        "<div id=\"childrencommentList"+json.parentid+"\" style=\"padding: 10px;\">",
					            		                  	                        "</div>"].join(""));
					            	 }
					            	 $("#childrencommentList"+json.parentid).append(newcomment);
				            	 }
				            	 
				            	 $("#commenteditformreset").click();
				            	 replycommen(-1,"发表评论");
				            	 changeValidateCode($("#validateCodeImg"));
			            	 }else{
			            		 alert(result.massage);
			            		 $("#validateCodeInput").focus();
			            	 }
			             }
			      }
			});
		}
		function replycommen(commentid,name,rootid){
			var id = commentid==-1?0:commentid;
			$("#commentparentid").val(id);
			$("#commentrootid").val(rootid);
			$("#commentListterm"+id).append($("#commenteditformdiv"));
			$("#commenteditformtitle").html(name);
			if(commentid!=-1){
				$("#commenteditform").find(".mdl-textfield__input")[0].focus();
			}
		}
	</script>
</div>
<script src="//cdn.bootcss.com/jquery.form/4.2.1/jquery.form.min.js"></script>
